<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>新增短信模板</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <style>
        /* 基础布局样式 */
        .mainBox { padding: 15px; }
        .main-container { max-width: 800px; margin: 0 auto; }
        .layui-form-item { margin-bottom: 22px; }
        /* 提示文本样式 */
        .form-tip { 
            display: block; 
            margin-top: 8px; 
            color: #666; 
            font-size: 12px; 
            line-height: 1.5;
        }
        .form-tip i { color: #1E9FFF; margin-right: 4px; }
        /* JSON示例容器 */
        .json-example { 
            margin-top: 8px; 
            padding: 10px; 
            background: #f8f8f8; 
            border-radius: 4px; 
            border: 1px solid #eee; 
            font-family: monospace; 
            font-size: 12px; 
            color: #333;
            white-space: pre-wrap;
            word-break: break-all;
        }
        /* 底部按钮区域 */
        .bottom { 
            position: fixed; 
            bottom: 0; 
            left: 0; 
            right: 0; 
            padding: 15px; 
            background: #fff; 
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05); 
            z-index: 99;
        }
        .button-container { text-align: center; }
        .button-container button { margin: 0 10px; }
    </style>
</head>

<body>
    <form class="layui-form" action="">
        <div class="mainBox">
            <div class="main-container">
                <!-- 1. 模板标题（必填，唯一） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">模板标题 <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" 
                               name="name" 
                               id="name" 
                               lay-verify="required|verifyName" 
                               autocomplete="off" 
                               placeholder="请输入模板标题（如：验证码发送模板）" 
                               class="layui-input">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            模板标题为唯一标识，不可与其他模板重复，建议清晰描述用途
                        </span>
                    </div>
                </div>

                <!-- 2. 短信供应商（必填，下拉选择） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">短信供应商 <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <select name="sms_provider" 
                                id="sms_provider" 
                                lay-verify="required" 
                                lay-search>
                            <option value="">请选择短信供应商</option>
                            <!-- 供应商选项通过JS动态加载 -->
                        </select>
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            需先配置短信供应商（如阿里云），才能选择使用
                        </span>
                    </div>
                </div>

                <!-- 3. 模板签名（必填） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">模板签名 <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" 
                               name="sign" 
                               id="sign" 
                               lay-verify="required|verifySignLength" 
                               autocomplete="off" 
                               placeholder="请输入短信签名（如：聪明掌柜）" 
                               class="layui-input">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            签名需在对应供应商平台（如阿里云）审核通过，长度不超过20个字符
                        </span>
                    </div>
                </div>

                <!-- 4. 模板CODE（必填，唯一） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">模板CODE <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" 
                               name="template_id" 
                               id="template_id" 
                               lay-verify="required|verifyTemplateId" 
                               autocomplete="off" 
                               placeholder="请输入供应商平台的模板CODE（如：SMS_460755411）" 
                               class="layui-input">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            模板CODE从供应商平台获取，不可重复添加，仅支持字母、数字、下划线和横线
                        </span>
                    </div>
                </div>

                <!-- 5. 模板变量（必填，JSON格式） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">模板变量 <span style="color: #ff4d4f;"></span></label>
                    <div class="layui-input-block">
                        <textarea name="template_data" 
                                  id="template_data" 
                                  lay-verify="" 
                                  autocomplete="off" 
                                  placeholder="请输入JSON格式的模板变量" 
                                  class="layui-textarea" 
                                  rows="6"></textarea>
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            变量需与模板CODE对应的字段一致（如验证码模板填{"code":"123456"}）
                        </span>
                        <div class="json-example">
示例：
{
    "code": "666666",  // 验证码（根据实际模板字段调整）
    "product": "聪明掌柜APP"  // 产品名称（根据实际模板字段调整）
}
                        </div>
                    </div>
                </div>

                <!-- 6. 描述说明（非必填） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">描述说明</label>
                    <div class="layui-input-block">
                        <textarea name="description" 
                                  id="description" 
                                  autocomplete="off" 
                                  placeholder="请输入模板的用途说明（便于团队协作）" 
                                  class="layui-textarea" 
                                  rows="3"></textarea>
                    </div>
                </div>

                <!-- 7. 模板状态（单选，默认开启） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">模板状态 <span style="color: #ff4d4f;">*</span></label>
                    <div class="layui-input-block">
                        <input type="radio" name="is_active" value="1" title="开启" lay-skin="tag" checked>
                        <input type="radio" name="is_active" value="0" title="关闭" lay-skin="tag">
                        <span class="form-tip">
                            <i class="layui-icon layui-icon-info"></i>
                            关闭状态的模板无法用于发送短信
                        </span>
                    </div>
                </div>

                <!-- 8. 排序号（默认0，非负整数） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">排序号</label>
                    <div class="layui-input-block">
                        <input type="number" 
                               name="sort_num" 
                               id="sort_num" 
                               lay-verify="verifySort" 
                               lay-affix="number"
                               autocomplete="off" 
                               value="0" 
                               placeholder="数字越大，列表中显示越靠前" 
                               class="layui-input">
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部提交按钮区域 -->
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" 
                        lay-submit lay-filter="sms-template-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="reset" class="pear-btn pear-btn-sm" id="reset-btn">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
                <button type="button" class="pear-btn pear-btn-danger pear-btn-sm" id="close-btn">
                    <i class="layui-icon layui-icon-close"></i>
                    取消
                </button>
            </div>
        </div>
    </form>

    <!-- 引入依赖JS文件 -->
    <script src="../../../component/com/api.js"></script>
    <script src="../../../component/com/auth.js"></script>
    <script src="../../../component/layui/layui.js"></script>
    <script src="../../../component/pear/pear.js"></script>
    <script>
        layui.use(['form', 'jquery', 'layer'], function () {
            let form = layui.form;
            let $ = layui.jquery;
            let layer = layui.layer;

            // 1. 基础配置
            const API_BASE_URL = apiConfig.baseUrl;
            const TOKEN = window.localStorage.getItem("token") || window.sessionStorage.getItem("token");
            const SMS_TEMPLATE_API = `${API_BASE_URL}/sms/template/`; // 模板接口
            const SMS_PROVIDER_API = `${API_BASE_URL}/sms/provider/?is_active=1`; // 有效供应商接口（加载下拉）

            // 2. 页面初始化：加载供应商下拉选项
            $(function() {
                loadSmsProviders();
            });

            // 3. 动态加载短信供应商下拉选项
            function loadSmsProviders() {
                const loading = layer.load(2, { shade: 0.3, shadeClose: false });
                $.ajax({
                    url: SMS_PROVIDER_API,
                    type: 'GET',
                    headers: { "Authorization": TOKEN },
                    dataType: 'json',
                    success: function (res) {
                        layer.close(loading);
                        if (res.success && res.data.results.length > 0) {
                            let options = '<option value="" disabled>请选择短信供应商</option>';
                            res.data.results.forEach(provider => {
                                options += `<option value="${provider.id}">${provider.sms_name}</option>`;
                            });
                            $('#sms_provider').html(options);
                            form.render('select'); // 重新渲染下拉框
                        } else {
                            layer.msg('未查询到可用的短信供应商，请先配置供应商', { icon: 2, time: 2000 });
                        }
                    },
                    error: function () {
                        layer.close(loading);
                        layer.msg('供应商列表加载失败，请刷新重试', { icon: 2, time: 2000 });
                    }
                });
            }

            // 4. 表单自定义校验规则
            form.verify({
                // 模板标题：非空+长度1-20+去空格
                verifyName: function (value) {
                    const trimVal = value.trim();
                    if (!trimVal) return "模板标题不能为空";
                    if (trimVal.length > 20) return "模板标题长度不能超过20个字符";
                },
                // 模板标题唯一性校验
                // verifyNameUnique: function (value) {
                //     const defer = layui.defer();
                //     const trimVal = value.trim();
                //     $.ajax({
                //         url: `${SMS_TEMPLATE_API}check-name/`, // 后端标题唯一性接口
                //         type: 'GET',
                //         headers: { "Authorization": TOKEN },
                //         data: { name: trimVal },
                //         success: function (res) {
                //             if (res.success && res.data.is_exist) {
                //                 defer.reject(`模板标题「${trimVal}」已存在，请更换`);
                //             } else {
                //                 defer.resolve();
                //             }
                //         },
                //         error: function () {
                //             defer.reject("标题唯一性检查失败，请稍后重试");
                //         }
                //     });
                //     return defer;
                // },
                // 签名长度校验
                verifySignLength: function (value) {
                    const trimVal = value.trim();
                    if (trimVal.length > 20) return "模板签名长度不能超过20个字符";
                },
                // 模板CODE格式校验
                verifyTemplateId: function (value) {
                    const trimVal = value.trim();
                    const reg = /^[a-zA-Z0-9_\-]{5,64}$/; // 5-64位字母/数字/下划线/横线
                    if (!reg.test(trimVal)) {
                        return "模板CODE格式错误，仅支持5-64位字母、数字、下划线或横线";
                    }
                },
                // 模板CODE唯一性校验
                // verifyTemplateIdUnique: function (value) {
                //     const defer = layui.defer();
                //     const trimVal = value.trim();
                //     $.ajax({
                //         url: `${SMS_TEMPLATE_API}check-template-id/`, // 后端CODE唯一性接口
                //         type: 'GET',
                //         headers: { "Authorization": TOKEN },
                //         data: { template_id: trimVal },
                //         success: function (res) {
                //             if (res.success && res.data.is_exist) {
                //                 defer.reject(`模板CODE「${trimVal}」已存在，不可重复添加`);
                //             } else {
                //                 defer.resolve();
                //             }
                //         },
                //         error: function () {
                //             defer.reject("模板CODE唯一性检查失败，请稍后重试");
                //         }
                //     });
                //     return defer;
                // },
                // JSON格式校验
                verifyJson: function (value) {
                    const trimVal = value.trim();
                    try {
                        const jsonData = JSON.parse(trimVal);
                        // 校验是否为非空对象
                        if (typeof jsonData !== 'object' || jsonData === null || Object.keys(jsonData).length === 0) {
                            return "模板变量需为非空JSON对象（如{\"code\":\"123456\"}）";
                        }
                    } catch (e) {
                        return "模板变量格式错误，请输入标准JSON（参考示例）";
                    }
                },
                // 排序号：非负整数
                verifySort: function (value) {
                    const num = parseInt(value);
                    if (isNaN(num) || num < 0 || num > 9999) {
                        return "排序号需为0-9999之间的非负整数";
                    }
                }
            });

            // 5. 表单提交事件
            form.on('submit(sms-template-save)', function (data) {
                // 处理表单数据：转换JSON字符串、整数类型
                let formData = {
                    ...data.field,
                    // template_data: JSON.parse(data.field.template_data), // 转JSON对象
                    is_active: parseInt(data.field.is_active), // 转整数
                    sort_num: parseInt(data.field.sort_num) // 转整数
                };

                // 发送新增请求
                const loading = layer.load(2, { shade: 0.3, shadeClose: false });
                $.ajax({
                    url: SMS_TEMPLATE_API,
                    data: JSON.stringify(formData),
                    dataType: 'json',
                    contentType: 'application/json',
                    type: 'POST',
                    headers: { "Authorization": TOKEN },
                    success: function (result) {
                        layer.close(loading);
                        if (result.success || result.code === 200) {
                            layer.msg(result.message || "短信模板新增成功", {
                                icon: 1,
                                time: 1000
                            }, function () {
                                // 关闭弹窗+刷新父页面表格
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                                parent.layui.table.reload("base-table");
                            });
                        } else {
                            // 提取错误信息
                            let errorMsg = result.message || "新增失败，请重试";
                            if (result.data && typeof result.data === 'object') {
                                const firstKey = Object.keys(result.data)[0];
                                firstKey && (errorMsg = result.data[firstKey][0]);
                            }
                            layer.msg(errorMsg, { icon: 2, time: 2000 });
                        }
                    },
                    error: function () {
                        layer.close(loading);
                        layer.msg("网络请求异常，请检查接口或网络", { icon: 2, time: 2000 });
                    }
                });

                return false; // 阻止默认提交
            });

             // 6. 取消按钮事件：关闭弹窗
            $('#close-btn').on('click', function() {
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            });

            // 7. 重置按钮事件：重置后重新渲染表单（解决单选框重置后样式异常）
            $('#reset-btn').on('click', function() {
                // 延迟执行，确保表单已重置
                setTimeout(function() {
                    form.render(); // 重新渲染表单元素
                }, 100);
            });
        });
    </script>